<template>
  <div>
    <div class="beijin" v-if="shops">
      <div :style="{'background-color':'rgba(255, 255, 255, 0.5)'}">
      <div class="bagbox">
        <div class="shopbox">
        <van-nav-bar
          class="daohang"
          left-text=""
          right-text=""
          left-arrow 
          safe-area-inset-top
          @click-left="$router.go(-1)"
        />     
          <div class="shop" >
            <h2>{{shops.shopName}}</h2>
            <div class="pinfen" @click="colorB">
              <van-rate
                v-model="shops.pingfen"
                :size="15"
                :color="shops.curColor"
                void-icon="star-o"
                void-color="#eee"
              /><span>{{shops.price}}</span>
            </div>
            <van-tag
              style="margin: 0.625rem 0"
              color="#DCDCDC"
              text-color="#696969"
              >{{shops.desc}}</van-tag
            >
            <div>
              <swiper class="swiper1" :options="swiperOption">
                <swiper-slide v-for="item in 8"
                :key="item.index"><img :src="shops.img" alt=""></swiper-slide>
              </swiper>
            </div>
            <div>
              <h3>{{shops.smart_tag}}</h3>
              <div>
                <van-icon name="location-o" /><span
                  >{{shops.distance}}</span
                >
              </div>
            </div>
          </div>
        <div class="shopcaipin">
          <h2>商家招牌</h2>
          <div>
            <swiper class="swiper2" :options="swiperOption" >
              <swiper-slide v-for="item in 8"
                :key="item.index"><img :src="shops. img" alt=""></swiper-slide>

            </swiper>
          </div>
          <div>
            <h4>大众点评·网友推荐</h4>
            <div class="pinjia">
              <van-tag
                v-for="item in 8"
                :key="item.index"
                style="margin: 0.625rem 0"
                color="#DCDCDC"
                size="large"
                text-color="#696969"
              >
                {{shops.catename}}</van-tag
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "swiper-example-multiple-slides-per-biew",
  title: "Multiple slides per view",
  components: {
    Swiper,
    SwiperSlide,
  },
  props:['id'],
  data() {
    return {
      swiperOption: {
        slidesPerView: 2.3,
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
      shops:null
    };
  },
  methods: {
    ratecolor() {
      console.log();
      this.shops.pingfen == 5
        ? (this.shops.curColor = 'ee0a24')
        : (this.shops.curColor = 'ffd21e');

      let curColor=this.shops.curColor
      this.shops.curColor='#'+curColor
      console.log(curColor);

      let id=this.id
       let url = (`/cuisines/curColor?id=${id}&curColor=${curColor}`);
      this.$axios.get(url).then((res) => {
        console.log(res);
      });
      // console.log(red);
    },
    // 监听评价
    colorB() {
      let pingfen=this.shops.pingfen
      let id=this.id
      console.log(pingfen);
      let url = (`/cuisines/pingfen?id=${id}&pingfen=${pingfen}`);
      this.$axios.get(url).then((res) => {
        console.log(res);
      });
    
      
      // console.log(i);
      this.ratecolor();
    },
    Axios(){
      let id=this.id
      let url = ('/cuisines/shop?id='+id);
      this.$axios.get(url).then((res) => {
        console.log(res);
        this.shops=res.data.data[0]
        console.log(this.shops);
      });
    }
  },
 mounted(){
   this.Axios()
 }
};
</script>
<style lang="scss">
.van-nav-bar .van-icon{
  color: #fff !important;
  font-size: 20px;
  font-weight: bold;
}
</style>
<style lang="scss" scoped>
// @import "./base.scss";
.swiper1 {
  height: 100%;
  width: 100%;
  margin: 20px 0;

  .swiper-slide {
    margin-right: 5px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px !important;
    height: 100px;
    text-align: center;
    font-weight: bold;
    background-color: #2c8dfb;
    background-position: center;
    background-size: cover;
    color: white;
    img{
      width: 100%;
    }
  }
}
.swiper2 {
  height: 100%;
  width: 100%;
  margin: 20px 0;
  .swiper-slide {
    margin-right: 5px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px !important;
    height: 100px;
    // text-align: center;
    // font-weight: bold;
    background-color: #2c8dfb;
    // background-position: center;
    // background-size: cover;
    color: white;
    img{
      width: 100%;
    }
  }
}
.beijin {
  background-color: rgb(235, 235, 235);
  background-image: url("/img/Shopkeeper1.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  padding-top: 200px;
}

.bagbox {
  width: 100vw;
  height: 35.1875rem;
  background-color: rgb(236, 236, 236);
.shopbox{
  position: relative;
  top: -200px;
  .daohang {
    background-color: rgba(236, 236, 236, 0);

  }

    .shop {
      background-color: rgb(255, 255, 255);
      margin: 0 0.625rem 3.125rem 0.625rem;
      padding: 0.625rem 0.625rem;
      border-radius: 3%;
    
      .pinfen {
        margin: 0.625rem 0;
        display: flex;
      }
      h2 {
        margin: 5px 0;
    }
  }
  .shopcaipin {
    background-color: rgb(255, 255, 255);
    margin: 0 0.625rem 3.125rem 0.625rem;
    padding: 0.625rem 0.625rem;
    border-radius: 3%;
    .pinjia {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      
    }
    h2 {
        margin: 5px 0;
    }
  }
}
}
</style>
